<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div class="text item">
        <div class="left">
          <div class="img">
            <el-avatar
              :size="100"
              :src="user.avatar"
            ></el-avatar>
          </div>
          <el-upload
  class="avatar-uploader"
  action="http://localhost:8888/upload/user"
  name="image"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
 
  <i  class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
          <div class="username">
            <span>{{user.username}}</span>
            <img src="@/assets/img/vip.png" alt="" width="20PX" />
          </div>
          <div class="ID">
            <span> ID：{{user.id}}</span>

            <span>加入时间：{{user.createDate}}</span>
          </div>
          <div class="brief">
            <el-collapse accordion>
              <el-collapse-item title="博客简介">
                <div>
                  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                </div>
                <div>
                  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="address"><span>IP 属地：福建省</span></div>
        </div>
        <div class="right">
          <el-button
            round
            icon="el-icon-document"
            @click="dialogFormVisible = true"
            >编辑资料
          </el-button>
          <el-button round icon="el-icon-s-tools"> 设置 </el-button>
        </div>

       
        <el-dialog title="编辑资料" :visible.sync="dialogFormVisible">
          <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="用户名" >
              <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" >
              <el-select v-model="user.sex" placeholder="请选择性别">
                <el-option label="男" value="男">

                </el-option>
                <el-option label="女" value="女">
                  
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱" >
              <el-input type="email" v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input type="number" min="0" v-model="user.age" oninput="value=value.replace(/[^\d]/g,'')"></el-input>

            </el-form-item>
           
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUserInfo()"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        
      </div>
    </el-card>
  </div>
</template>

<script>
import {getUserInfo,updateInfo,updateAvatar} from '@/api/user'
import {getToken} from '@/request/token'
export default {
  data: () => ({
    user:'',
    show2: false,
    dialogFormVisible: false,
  }),
  methods: {
    handleAvatarSuccess(res, file) {
      
       this.user.avatar=res.data
       const user={
        id:this.user.id,
        avatar:this.user.avatar
       }
       updateAvatar(user).then(res=>{
        if(res.success){
          location.reload()
        return  this.$message.success('上传头像图片成功');
        }
        return this.$message.error('上传头像失败');
       })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      this.$confirm("确认修改？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    updateUserInfo(){
      const info={
      id:this.user.id,
      username:this.user.username,
      email:this.user.email,
      age:this.user.age,
      sex:this.user.sex
      }
      updateInfo(info).then(res=>{
        if(!res.success){
          return  this.$message.error('更新失败');
        }
        this.dialogFormVisible = false
        location.reload()
        return this.$message.success('更新成功')
        
      })
    }
  },
  created(){
    const token=getToken();
    if(token!=null){
    getUserInfo(token).then(res=>{
      if(!res.success){
        return  this.$message.error('未登录');
      }else{
        
        this.user=res.data
        
      
      }
      
    })
  }
  }
};
</script>

<style scoped lang="less">
.el-avatar {
  margin-top: -10px;
  float: left;
}
.el-collapse {
  border: 0;
}
/deep/.el-collapse-item__header {
  font-size: 12px;
  height: 12px;
  margin-top: 2px;
  background-color: rgb(251, 251, 251);
  border: 0;
  width: 100px;
}
/deep/.el-collapse-item__content {
  font-size: 4px;
  padding-bottom: 5px;
  background-color: rgb(251, 251, 251);
}
.username {
  margin-top: 15px;
  margin-left: 120px;
  color: rgb(232, 226, 226);
  font-size: 26px;
  font-weight: bold;
  padding: 3px;
}
.username img {
  position: absolute;
  width: 20px;
  margin: 10px 4px;
}
.ID {
  margin-left: 120px;
}
.ID span:nth-child(1) {
  display: block;
  font-size: 10px;
  font-weight: bold;
  color: rgb(175, 175, 175);
  margin-top: -20px;
}
.ID span:nth-child(2) {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgb(72, 70, 70);
  margin-top: -28px;
}

.address {
  margin: 10px 120px;
}

.second {
  margin-top: 15px;
}

.brief {
  margin-top: 1px;
  margin-left: 120px;
}
.box-card {
  width: 100%;
  background: rgb(251, 251, 251);
  margin-top: 10px;
}
.text {
  font-size: 14px;
}

.item {
  height: 200px;
}
.img {
  margin-top: -5px;
  background: rgb(253, 245, 245);
}
.left {
  float: left;
}
.right {
  float: right;
}

.transition-box {
  position: fixed;
  top: 26%;
  left: 30%;
  width: 600px;
  height: 600px;

  border-radius: 4px;

  background-color: #f1f3f5;

  // text-align: center;
  color: rgb(22, 21, 21);
  padding: 40px 20px;
  box-sizing: border-box;

  z-index: 999;
}
</style>